<template>
    <div class="content">
        <div class="content-box">
            <div class="top-bar">
                <div class="item" @click="click(0)">
                    公司新闻
                </div>
                <span class="pc"></span>
                <div class="item" @click="click(1)">
                    行业知识
                </div>
            </div>
            <div class="message-box">
                <div class="news-messlist list" v-for="(item, index) in newsList" :key="index" v-if="index == 0"
                    @click="gotoXiangqing(1, item.newsid)">
                    <div class="img-box-left">
                        <img class="img" :src="base64Img(item.img)" alt="">
                    </div>
                    <div class="message-right">
                        {{ item.title }}
                    </div>
                    <div class="time pc">
                        {{ index + 1 }}
                    </div>
                </div>
                <div class="chanpin-messlist list " v-for="(item, index) in chanpinList" :key="index" v-if="index == 1"
                    @click="gotoXiangqing(2, item.newsid)">
                    <div class="img-box-left">
                        <img class="img" :src="base64Img(item.img)" alt="">
                    </div>
                    <div class="message-right">
                        {{ item.title }}
                    </div>
                    <div class="time pc">
                        {{ index + 1 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getNewsList } from '@/api/viewapi.js'
import { base64Img } from '@/tools/tools.js'
import { ref, reactive, onMounted } from 'vue'
import router from '@/router/index.js';
const index = ref(0)
const newsList = ref([])
const chanpinList = ref([])

const _getNewsList = () => {
    getNewsList().then((res) => {
        console.log('新闻数据', res);
        newsList.value = res.data.newslist
        chanpinList.value = res.data.chanpinlist
    })
}

// 跳转详情
const gotoXiangqing = (checkid, newsid) => {
    router.push({
        path: '/newsmessage', query: {
            checkid: checkid, newsid
        }
    })
}


const click = (i) => {
    index.value = i
}

onMounted(() => {
    _getNewsList()
});

</script>

<style lang="scss" scoped>
/* pc */
@media (min-width: 800px) {
    .content-box {
        max-width: 1400px;
        margin: 0 auto;

        .top-bar {
            display: flex;
            padding: 10px 0;
            width: 300px;
            justify-content: space-between;

            .item {
                padding: 24px;
                border: 1px solid gainsboro;
                border-radius: 10px;
                cursor: pointer;
                transition: transform 0.3s ease, background-color 0.3s ease;

            }

            span {
                margin-top: 16px;
                width: 1px;
                height: 40px;
                background-color: gainsboro;
            }

            .item:hover {
                background-color: #00a0e9;
                color: white;
                border: 1px solid rgb(255, 255, 255);

            }
        }

        .message-box {
            margin-top: 40px;

            .list {
                display: flex;
                margin: 20px 0;
                background-color: #ebf3f7;
                justify-content: space-between;
                transition: 0.3s;
                cursor: pointer;

                .img-box-left {
                    width: 340px;
                    background-color: #e2f6ff;
                    display: flex;
                    justify-content: center;

                    .img {
                        width: 340px;
                    }
                }

                .message-right {
                    width: 900px;
                    line-height: 264px;
                    font-size: 24px;
                    font-weight: 800;
                }

                .time {
                    line-height: 264px;
                    font-size: 24px;
                    font-weight: 800;
                    padding-right: 80px;
                }
            }

            .list:hover {
                background-color: #ffffff;
                box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
                color: #00a0e9;
                transform: scale(1.04);


            }
        }
    }
}

/* phone */
@media screen and (max-width: 799px) {
    img {
        width: 100%;
    }
    .pc {
        display: none;
    }

    .content {
        .content-box {
            .top-bar {
                margin-top: 10px;
                display: flex;
                margin-left: 10px;
                justify-content: space-around;

                .item {
                    text-align: center;
                    padding: 20px;
                    background-color: #00a0e9;
                    color: white;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    border-radius: 10px;
                }
            }
            .message-box {
                .list {
                    padding-top: 10px;
                    padding-left: 4px;
                    padding-right: 4px;
                    display: flex;
                    .img-box-left {
                        width: 400px;
                    }
                    .message-right {
                        padding: 10px 0 10px 10px;
                    }
                }
            }
        }
    }
}
</style>